<template>
  <view class="bg-page">
    <view class="status-bar" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
      <view class="nav-bar">
        <image src="/static/left_arrow.png" class="nav-back-icon" @click="goBack" />
      </view>
    </view>
    <view class="long-bg-img-wrap">
      <image src="/static/23.png" mode="widthFix" class="long-bg-img" />
      <view class="buy-btn-area">
        <button class="buy-btn" @click="showDialog = true">立即购买</button>
      </view>
    </view>

    <!-- 弹窗 -->
    <view v-if="showDialog" class="custom-dialog-mask" @touchmove.stop.prevent>
      <view class="custom-dialog">
        <view class="dialog-title">
          官方人工深度定制服务
          <text class="dialog-price">
            <image src="/static/1y.png" class="coin-icon" />9,900 /次
          </text>
        </view>
        <view class="dialog-desc">确认购买吗？</view>
        <view class="dialog-btn-area">
          <button class="dialog-buy-btn" @click="onConfirmBuy">确认购买</button>
        </view>
      </view>
      <!-- 关闭icon放在弹窗下方 -->
      <view class="dialog-close-area">
        <image src="/static/close222.png" class="dialog-close-icon" @click="showDialog = false" />
      </view>
    </view>

    <!-- 新增：购买成功弹窗 -->
    <view v-if="showSuccess" class="success-dialog-mask" @touchmove.stop.prevent>
      <view class="success-dialog">
        <view class="success-title">个性定制/弹窗-扣款成功，添加二维码 · 版本1</view>
        <view class="success-qrcode-box">
          <!-- 二维码占位，可替换为实际二维码图片 -->
          <view class="success-qrcode"></view>
        </view>
        <view class="success-tip">请添加您的专属客服，私人定制智能体～</view>
      </view>
      <view class="success-dialog-close-area">
        <image src="/static/close222.png" class="success-dialog-close-icon" @click="showSuccess = false" />
      </view>
    </view>
  </view>
</template>


<script>
export default {
  data() {
    return {
      navHeight: "", //整体顶部导航栏的高度
      statusBarHeight: "", //状态栏高度
      showDialog: false,
      showSuccess: false //控制成功弹窗显示
    }
  },
  onLoad() {
    let { statusBarHeight, system } = uni.getSystemInfoSync();
    this.statusBarHeight = statusBarHeight;
    this.navHeight = statusBarHeight + (system.indexOf("iOS") > -1 ? 44 : 48);
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    onConfirmBuy() {
      this.showSuccess = true;
      // 从本地缓存 userInfo 获取 userid
      // const userInfo = uni.getStorageSync('userInfo');
      // let userid = '';
      // if (userInfo) {
      //   userid = userInfo.userid;
      // } else {
      //   uni.showToast({ title: '未获取到用户信息', icon: 'none' });
      //   return;
      // }
      // this.$Request.postApi('/index.php?m=user&a=paydzvip&ajax=1', { userid }).then(res => {
      //   const arr = res.data && Array.isArray(res.data) ? res.data : [];
      //   const data = arr[0] || {};
      //   if (data.status == 1) {
      //     this.showDialog = false;
      //     this.showSuccess = true;
      //   } else {
      //     uni.showToast({ title: data.msg, icon: 'none', duration: 3500 });
      //   }
      // }).catch(() => {
      //   uni.showToast({ title: '请求失败', icon: 'none' });
      // });
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #000000;
}
.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: transparent;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 500;
  font-size: 35rpx;

  .nav-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0 23rpx;
  }

  .nav-back-icon,
  .nav-details-icon {
    width: 46.15rpx;
    height: 46.15rpx;
  }

  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 35rpx;
    font-weight: 500;
    color: #fff;
  }
}

.bg-page {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background: #100D05;
}

.long-bg-img-wrap {
  position: relative;
  width: 100vw;
}

.long-bg-img {
  width: 100vw;
  display: block;
}

.buy-btn-area {
  width: 100vw;
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: 260rpx; // 距离图片底部的距离，可根据需要调整
  z-index: 2;
}

.buy-btn {
  width: 263rpx;
  height: 80rpx;
  background: linear-gradient(176deg, #FFD093 0%, #8A602A 100%);
  border: none;
  border-radius: 19rpx;
  border: 2rpx solid;
  color: #1E1E1E;
  font-size: 38rpx;
  font-weight: 500;
  text-align: center;
  line-height: 80rpx;
  padding: 0;
  margin: 0;
  outline: none;
  // 去除uniapp默认button样式
  background-clip: padding-box;
}

.custom-dialog-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.custom-dialog {
  width: 750rpx;
  max-width: 90vw;
  min-height: 400rpx;
  background: linear-gradient(180deg, #000000 5%, rgba(255, 225, 186, 0.21) 100%);
  border-radius: 40rpx;
  padding: 60rpx 40rpx 40rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.dialog-title {
  font-size: 40rpx;
  color: #FFE1BA;
  font-weight: 500;
  text-align: left;
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.dialog-price {
  font-size: 36rpx;
  color: #FFE0B0;
  margin-left: 16rpx;
  display: flex;
  align-items: center;
}

.coin-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 6rpx;
  vertical-align: middle;
}

.dialog-desc {
  font-size: 32rpx;
  color: #D9D9D9;
  margin-bottom: 48rpx;
  text-align: center;
}

.dialog-btn-area {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 32rpx;
}

.dialog-buy-btn {
  width: 263rpx;
  height: 80rpx;
  background: linear-gradient(176deg, #FFD093 0%, #8A602A 100%);
  border: none;
  border-radius: 19rpx;
  color: #1E1E1E;
  font-size: 38rpx;
  font-weight: 500;
  text-align: center;
  line-height: 80rpx;
  box-shadow: 0 4rpx 16rpx 0 rgba(138, 96, 42, 0.15);
  padding: 0;
  margin: 0;
  outline: none;
}

.dialog-close-area {
  width: 100vw;
  display: flex;
  justify-content: center;
  margin-top: 54rpx;
}

.dialog-close-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.08);
  // 可选：加hover效果
  // transition: box-shadow 0.2s;
}

.success-dialog-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.success-dialog {
  width: 750rpx;
  max-width: 90vw;
  min-height: 400rpx;
  background: linear-gradient(180deg, #000000 5%, rgba(255, 225, 186, 0.21) 100%);
  border-radius: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 60rpx 40rpx 40rpx 40rpx;
  position: relative;
}

.success-title {
  color: #888;
  font-size: 26rpx;
  text-align: center;
  margin-bottom: 32rpx;
}

.success-qrcode-box {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 36rpx;
}

.success-qrcode {
  width: 220rpx;
  height: 220rpx;
  background: #fff6ec;
  border-radius: 32rpx;
  border: 6rpx solid #FFE1BA;
}

.success-tip {
  color: #FFE1BA;
  font-size: 32rpx;
  text-align: center;
  margin-top: 24rpx;
  font-weight: 500;
}

.success-dialog-close-area {
  width: 100vw;
  display: flex;
  justify-content: center;
  margin-top: 32rpx;
}

.success-dialog-close-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.08);
}
</style>
